<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.Calendar"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/BF_MES/jquery-1.7.2.js"></script>
<script type="text/javascript">
	chart1data = new Array();
	chart2data = new Array();
	chart3data = new Array();
	chart4data = new Array();
	google.load("visualization", "1", {
		packages : [ "corechart", 'gauge' ]
	});
	google.setOnLoadCallback(drawChart1);
	google.setOnLoadCallback(drawChart2);
	google.setOnLoadCallback(drawChart3);
	google.setOnLoadCallback(drawChart4);
	// div1
	function drawChart1() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Day');
		data.addColumn('number', 'op1-hp');
		data.addColumn('number', 'op2-hp');
		data.addColumn('number', 'op3-hp');
		data.addColumn('number', '불량률(%)');
		data.addColumn('number', '달성률(%)');
		data.addRows(chart1data.length);
		var index = 0;
		for ( var j = chart1data.length-1; j >= 0; j--) {
			data.setCell(index, 0, chart1data[j].his_date);
			data.setCell(index, 1, chart1data[j].his_op1_hp);
			data.setCell(index, 2, chart1data[j].his_op2_hp);
			data.setCell(index, 3, chart1data[j].his_op3_hp);
			data.setCell(index, 4, chart1data[j].his_day_fail);
			data.setCell(index++, 5, chart1data[j].success);
		}
		// 	alert("111 : " + chart1data.length);
		var options = {
			title : '라인 현황',
			width : 600,
			height : 400,
			hAxis : {
				title : 'Day',
				titleTextStyle : {
					color : 'red'
				}
			}
		};
		var chart = new google.visualization.ColumnChart(document
				.getElementById('div1'));
		chart.draw(data, options);

		var data2 = google.visualization.arrayToDataTable([
				[ 'Label', 'Value' ], [ 'OP1-HP', chart1data[0].his_op1_hp ], 
				[ 'OP2-HP', chart1data[0].his_op2_hp ],
				[ 'OP3-HP', chart1data[0].his_op3_hp ] ]);

		var options2 = {
			width : 400,
			height : 120,
			redFrom : 90,
			redTo : 100,
			yellowFrom : 75,
			yellowTo : 90,
			minorTicks : 5
		};

		var chart2 = new google.visualization.Gauge(document
				.getElementById('guage'));
		chart2.draw(data2, options2);
	}

	// div chart2
	function drawChart2() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Day');
		data.addColumn('number', '원재료(kg)');
		data.addColumn('number', '완제품(개)');
		data.addRows(chart2data.length);
		var index = 0;
		for ( var j = chart2data.length-1; j >= 0; j--) {
			data.setCell(index, 0, chart2data[j].lot_list_date);
			data.setCell(index, 1, chart2data[j].lot_input);
			data.setCell(index++, 2, chart2data[j].lot_output);
		}
		var options = {
			title : '원재료/완제품 현황',
			width : 600,
			height : 400,
			hAxis : {
				title : 'Day',
				titleTextStyle : {
					color : 'red'
				}
			},
			seriesType: "bars",
	        series: {5: {type: "line"}}
		};
		var chart = new google.visualization.ColumnChart(document
				.getElementById('div2'));
		chart.draw(data, options);
	}
	// div 3
	function drawChart3() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Day');
		data.addColumn('number', '일일요구량(개)');
		data.addColumn('number', '완제품(개)');
		data.addColumn('number', '재고품(개)');
		data.addRows(chart3data.length);
		var index = 0;
		for ( var j = chart3data.length-1; j >= 0; j--) {
			data.setCell(index, 0, chart3data[j].his_date);
			data.setCell(index, 1, chart3data[j].re_mount);
			data.setCell(index, 2, chart3data[j].his_day_ok);
			data.setCell(index++, 3, chart3data[j].st_mount);
		}
		var options = {
			title : '날짜별 달성량',
			width : 600,
			height : 400,
			hAxis : {
				title : 'Day',
				titleTextStyle : {
					color : 'red'
				}
			}
		};

		var chart = new google.visualization.ColumnChart(document
				.getElementById('div3'));
		chart.draw(data, options);
	}

	// div 4
	function drawChart4() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Day');
		data.addColumn('number', '매출액(원)');
		data.addColumn('number', '매출액(원)');
		data.addRows(chart4data.length);
		var index = 0;
		for ( var j = chart4data.length-1; j >= 0; j--) {
			data.setCell(index, 0, chart4data[j].his_date);
			data.setCell(index, 1, chart4data[j].total);
			data.setCell(index++, 2, chart4data[j].total);
		}
		var options = {
				title : '매출 현황',
				width : 600,
				height : 400,
				hAxis : {
					title : 'Day',
					titleTextStyle : {
						color : 'red'
					}
				},
				seriesType: "bars",
		        series: {1: {type: "line"}}
				
			};
		var chart = new google.visualization.ComboChart(document
				.getElementById('div4'));
		chart.draw(data, options);
	}
	$(document).ready(function() {
		$.ajax({
			type : "POST",
			url : "/BF_MES/factory.do",
			data : "command=getRefreshInfoCeo",
			dataType : "json", // json으로 datatype을 명시 
			success : function(data) {
				var json = JSON.parse(data.refreshInfo);
				var i = 0;
				$.each(json.chart1, function(key, list) {
					chart1data[i] = list;
					i++;
				});
				i = 0;
				$.each(json.chart2, function(key, list) {
					chart2data[i] = list;
					i++;
				});
				i = 0;
				$.each(json.chart3, function(key, list) {
					chart3data[i] = list;
					i++;
				});
				i = 0;
				$.each(json.chart4, function(key, list) {
					chart4data[i] = list;
					i++;
				});
			}
		});
		alert("현재 공장 상태가 업데이트 되었습니다!");
	});
</script>
</head>
<body>
<%Calendar cal = Calendar.getInstance();
	String time = cal.get(Calendar.YEAR) +"/" + (cal.get(Calendar.MONTH)+1) +"/" 
	+cal.get(Calendar.DAY_OF_MONTH) + "  " +cal.get(Calendar.HOUR) + ":" + cal.get(Calendar.MINUTE); %>
	<input type="button" value="업데이트" onclick="location.reload()">
	<center>
	<table>
	<tr>
		<td width="1225" align="right"><b><font size="5">[<%=time %>]</font></b></td>
	</tr>
	</table>
	<table border="3" bordercolor="seablue">
		<tr>
			<td colspan="2" align="center">
			<b>기계 내구도 현황</b>
				<div id="guage" align="center"></div>
			</td>
		</tr>
		<tr>
			<td width=600><div id="div1" align="center"></div></td>
			<td width=600><div id="div2" align="center"></div></td>
		</tr>
		<tr>
			<td><div id="div3" align="center"></div></td>
			<td><div id="div4" align="center"></div></td>
		</tr>
	</table>
	</center>
</body>
</html>